<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <script type="text/javascript" src="../assets/js/vue.js" ></script>
	    <title>vue.set 全局操作</title>
	</head>
	<body>
		<h1>Vue2.0全局API-Vue.set全局操作</h1>

		<div id="app">
			{{goods}}:{{count}}<p>
			<p>
				<ul>
					<li v-for='item in arr'>{{item}}</li>
				</ul>
			</p>
			
		</div>
		<button onclick="add()">add</button>
	</body>
	
	<script type="application/javascript">
		function add(){
			//方法1，使用Vue.set  主要用来更新数组,其他方式可能就比较麻烦
			Vue.set(outData,'count',2);
			Vue.set(app.arr,2,'fff');//vueset不受影响（对比下面）
			
			//方法2,使用vue的对象
			app.count++;
			//方法3，直接使用js
			outData.count++;//如果这一行注释掉，则下面的也没用了，改变下标‘数组长度，vue无法监听到
			app.arr[1]='ddd';
		}
	
	
		//必须写在上面，否则下面引用时会报错
	    var outData = {
        	count:1,
        	goods:'car',
        	arr:['a','b','c']
        }
	    
        var app=new Vue({
            el:'#app',
            //引用外部数据
            data:outData
        });
    
	</script>
</html>